<!-- 详情弹窗 -->
<template>
  <el-dialog
    :destroy-on-close="true"
    :lock-scroll="false"
    :title=" '['+data.adgroupName +  ']OCPC详情'"
    :visible="visible"
    width="800px"
    @update:visible="updateVisible">
    <el-form
      class="ele-form-detail"
      label-width="120px"
      size="mini">
      <el-form-item label="转化ID:">
        <div class="ele-text-secondary">
          {{ ocpc.appTransId }}
        </div>
      </el-form-item>
      <el-form-item label="接入方式:">
        <div class="ele-text-secondary">
          {{ getTransFrom(ocpc.transFrom) }}
        </div>
      </el-form-item>
      <el-form-item label="目标转化出价:">
        <div class="ele-text-secondary">
          {{ ocpc.ocpcBid }}元/转化
        </div>
      </el-form-item>
      <el-form-item label="推广URL:">
        <div class="ele-text-secondary">
          {{ ocpc.lpUrl }}
        </div>
      </el-form-item>
      <el-form-item label="目标转化:">
        <div class="ele-text-secondary">
          {{ getTransType(ocpc.transType) }}
        </div>
      </el-form-item>
      <el-form-item label="OCPC投放阶段:">
        <div class="ele-text-secondary">
          {{ getOcpcLevel(ocpc.ocpcLevel) }}
        </div>
      </el-form-item>

      <el-form-item label="付费模式:">
        <div class="ele-text-secondary">
          {{ getPayMode(ocpc.payMode) }}
        </div>
      </el-form-item>

      <el-form-item label="优化深度转化:">
        <div class="ele-text-secondary">
          {{ ocpc.optimizeDeepTrans }}
        </div>
      </el-form-item>

      <el-form-item label="跳过数据积累:">
        <div class="ele-text-secondary">
          {{ ocpc.isSkipStageOne }}
        </div>
      </el-form-item>

    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'OperOcpcDetail',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 数据
    data: Object
  },

  data() {
    return {
      ocpc: {
        "appTransId": null,
        "transFrom": null,
        "ocpcBid": null,
        "lpUrl": null,
        "transType": null,
        "ocpcLevel": null,
        "isSkipStageOne": null,
        "payMode": null,
        "optimizeDeepTrans": null,
        "urlType": null,
        "isManualBidForMaxMode": null,
        "isManualDeepBidForMaxMode": null
      },
    };
  },

  watch: {
    data() {
      if (Object.keys(this.data).length > 0) {
        this.ocpc = Object.assign({}, this.data.extend1);
      }
    }
  },
  methods: {
    getTransFrom(value) {
      if (!value) {
        return '-';
      }
      return this.getLineValue("1-应用API\n" +
        "2-基木鱼营销页\n" +
        "4-API激活(已废弃)\n" +
        "5-网页JS布码\n" +
        "7-线索API\n" +
        "8-咨询工具授权\n" +
        "13-应用SDK", value + '', '-');
    },

    getTransType(value) {
      if (!value) {
        return '-';
      }
      return this.getLineValue("1-咨询按钮点击\n" +
        "2-电话按钮点击\n" +
        "3-表单提交成功\n" +
        "4-激活\n" +
        "5-表单按钮点击\n" +
        "6-下载（预约）按钮点击（小流量）\n" +
        "10-购买成功\n" +
        "14-订单提交成功\n" +
        "17-三句话咨询\n" +
        "18-留线索\n" +
        "19-一句话咨询\n" +
        "20-深度页面访问\n" +
        "25-注册（小流量）\n" +
        "26-付费（小流量）\n" +
        "30-电话拨通\n" +
        "35-微信复制按钮点击（小流量）\n" +
        "41-申请（小流量）\n" +
        "42-授信（小流量）\n" +
        "45-商品下单成功\n" +
        "46-加入购物车\n" +
        "47-商品收藏\n" +
        "48-商品详情页到达\n" +
        "57-店铺调起\n" +
        "67-微信调起按钮点击\n" +
        "68-粉丝关注成功\n" +
        "71-应用调起\n" +
        "79-微信加粉成功（小流量）\n" +
        "80-直播间成单（小流量）\n" +
        "82-直播间观看（小流量）\n" +
        "83-直播间商品按钮点击（小流量）\n" +
        "84-直播间停留（小流量）\n" +
        "85-直播间评论（小流量）\n" +
        "86-直播间打赏（小流量）\n" +
        "87-直播间购物袋点击（小流量）", value + '', '-');
    },

    getLineValue(str, value, ret) {
      let obj = str.split('\n').reduce((c, v) => (c[v.split('-')[0]] = v.split('-')[1], c), {});
      for (let i in obj) {
        if (i === value) {
          return obj[i];
        }
      }
      return ret;
    },

    getOcpcLevel(obj) {
      if (!obj) {
        return '-';
      }
      if (obj === 1) {
        return '第一阶段';
      }
      return '第二阶段';
    },

    getPayMode(obj) {
      if (!obj) {
        return '-';
      }
      if (obj === 1) {
        return 'oCPC';
      }
      return 'oCPM';
    },

    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
</style>
